<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')">
    <view class="container">
      <uni-card>
        <uni-grid :column="3" :showBorder="false" :highlight="true" @change="goNovel">
          <uni-grid-item v-for="(item, index) in novels" :index="index" :key="index">
            <view class="grid-item-box">
              <image :src="item.imgUrl" class="image" mode="aspectFill" />
              <text class="text">{{ item.title }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-card>
    </view>
  </page-meta>
</template>

<script setup>
  const data = reactive({
    show: false,
    novels: [],
  });
  const {
    show,
    novels
  } = toRefs(data);

  onShow(() => {
    console.log('novel-on-show');
    loadNovels();
  })

  const loadNovels = () => {}

  const goNovel = (e) => {
    let {
      index
    } = e.detail
    let novel = data.novels[index] || {};
  }
</script>

<style scoped lang="scss">
  @use './novel.scss';
</style>
